<template>
    <div class="box">
        <header class="header">
            <div class="mynav">
                <router-link to="/kind" tag="div" class="left">
                    <van-icon name="wap-nav" size="18" />
                </router-link>
                <div class="title">
                    <router-link to="/search" tag="div" class="search">
                        <van-icon name="search" size="18" />
                        <p class="p1">苹果14手机</p>
                    </router-link>
                </div>
                <div class="right">
                    <van-icon v-if="loginState" @click="toCity" name="user-o" size="18">
                        <span style="font-size:14px;">{{ city }}</span>
                    </van-icon>
                    <!-- <van-icon v-if="loginState" @click="toCity" name="user-o" size="18" /> -->
                    <router-link to="/login" tag="p" v-else>登录</router-link>
                </div>
            </div>
        </header>
        <div class="content" ref="content">
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                    <img v-lazy="item.img" alt="" />
                </van-swipe-item>
            </van-swipe>
            <!-- 宫格布局，navList 数据 -->
            <van-grid icon-size="36px" :border="false" :column-num="5">
                <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
            </van-grid>
            <!-- 嗨购秒杀 -->
            <ul class="sekillTitle">
                <li style="line-height:18px;">嗨购秒杀</li>
                <li>
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </li>
                <li style="margin-left: 10px;">
                    更多秒杀
                    <van-icon name="gem-o" color="#f66" size="20px" />
                </li>
            </ul>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                <!-- 更多秒杀下面的商品列表 -->
                <ul class="seckillTitle">
                    <!-- 声明式跳转到详情 字符串拼接 -->
                    <!-- <router-link tag="li" :to='"/detail/" + item.proid' v-for='item in seckillList' :key="item.proid"> -->
                    <!-- 动态路由传参 - 配合命名路由 -->
                    <!-- <router-link tag="li" :to="{ name: 'detail', params: { proid: item.proid } }" v-for='item in seckillList' :key="item.proid"> -->
                    <router-link tag="li" :to="{ path: '/detail/' + item.proid }" v-for="item in seckillList"
                        :key="item.proid">
                        <van-image class="splb" width="55px" height="55px" :src="item.img1" />
                        <p>￥{{ item.originprice }}</p>
                    </router-link>
                </ul>

                <!-- 设置上拉加载更多 -->
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="100"
                    :immediate-check="false">
                    <ProList :proList="proList" />
                </van-list>
            </van-pull-refresh>
            <!-- 回到顶部 -->
            <div class="backTop" v-if="scrollTop > 300" @click="backTops">
                <van-icon size="30" name="back-top" />
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { mapState } from 'vuex'


// 导入我们自己封装的组件，导入的时候后缀可以不写
import ProList from "@/components/ProList";


import {
    Button,
    Swipe,
    SwipeItem,
    Lazyload,
    Grid,
    GridItem,
    CountDown,
    Icon,
    Image as VanImage,
    List,
    PullRefresh,
} from "vant";
// 找到自己二次封装的 axios
// import axios from '@/utils/request.js'

// 导入数据请求的方法
import {
    getBannerList,
    getNavList,
    getSeckillList,
    getProList,
} from "@/api/home"; // @ 是 src 目录，.js 可以不写

Vue.use(Lazyload);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(CountDown);
Vue.use(Button);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(List);
Vue.use(PullRefresh);
export default {
    data() {
        return {
            // 轮播图数据
            bannerList: [],
            navList: [],
            time: 3 * 60 * 60 * 1000,
            seckillList: [],
            proList: [],
            loading: false, // 表示是不是上拉加载的状态
            finished: false, // 表示数据是否已经被加载完
            count: 2, //因为在 mounted 中已经加载了第一页数据了，所以这里从第 2 页开始
            isLoading: false,
            scrollTop: 0,
            city: "",
        };
    },
    components: {
        ProList,
    },
    computed: {
        ...mapState({
            loginState: state => state.user.loginState
        })
    },
    mounted() {
        this.$bus.$on("mos", this.demo)

        // 获取轮播图的数据
        // axios.get('/banner/list')
        // .then(res=>{
        //   console.log(res)
        // })
        getBannerList().then((res) => {
            //   console.log(res)
            this.bannerList = res.data;
        });

        // 获取导航菜单的数据
        this.navList = getNavList();

        // 获取秒杀的列表
        getSeckillList().then((res) => {
            // console.log(res);
            this.seckillList = res.data;
        });

        // 获取产品列表的数据
        getProList().then((res) => {
            // console.log(res.data);
            this.proList = res.data;
        });

        // 获取到页面的滚动距离
        // console.log(this.$refs.content);
        this.$refs.content.addEventListener("scroll", () => {
            this.scrollTop = this.$refs.content.scrollTop;
        });
    },
    methods: {
        demo(a) {
            // console.log('11111111111111');
            console.log(a[2].name)
            // console.log('11111111111111');
            // console.log(a[2].name)
            // this.abc = 'aaaaaa'
            // this.myabcd = '666666'
            // console.log(this);
            // console.log(this.abc);
            // DOM 还没有更新
            // this.$nextTick(function () {
            // })   
            this.city = a[2].name
        },

        toCity() {
            this.$router.push('/city')
        },
        // 页面上拉到底一定会触发的函数
        onLoad() {
            // 在函数中进行数据请求拿到对应页数的数据
            // console.log('触发上拉了');
            // 请求开始
            this.loading = true;
            // 数据请求
            getProList({ count: this.count }).then((res) => {
                // 请求结束
                this.loading = false;

                if (res.data.length == 0) {
                    // 没有数据
                    this.finished = true;
                } else {
                    // 有数据
                    // 将两个数组合并成一个 concat
                    this.proList = [...this.proList, ...res.data];
                    // 有数据 -- 将页码进行加 1
                    this.count++;
                }
            });
        },
        onRefresh() {
            this.isLoading = true;
            // 获取产品列表的数据
            getProList().then((res) => {
                //
                // console.log("下拉新的数据了");
                this.isLoading = false;
                this.proList = res.data;
                // 重置 将页码以及是否还有数据 --- 改为初始状态
                this.count = 2;
                this.finished = false;
            });
        },
        backTops() {
            this.$refs.content.scrollTop = 0;
        },
    },
};
</script>
<style lang="stylus" scoped>
// 头部搜索
.mynav
  background-color #f66
  display flex
  height 0.44rem
  color #fff
  .left
    width 50px
    display flex
    justify-content center
    align-items center
  .title
    flex 1
    display flex
    justify-content center
    align-items center

    .search
      width 90%
      height 0.32rem
      background-color #fff
      border-radius 16px
      display flex
      line-height 0.32rem
      color #999
      line-height: 10px;
      .van-icon
        width 26px
        margin 7px 2px 7px 10px
      p
        flex 1
  .right
    width 80px
    display flex
    justify-content center
    align-items center

    // 下边
.my-swipe {
    width: 96%;
    margin: 10px 2%;
  }
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    height: 150px;
    width: 100%;
    text-align: center;
    /* background-color: #39a9ed; */
  }
  img {
    height: 100%;
  }
.sekillTitle
{
  display: flex;
  height: 0.40rem;
  background-color: #fff;
}
.seckillList
  display flex
  li
    flex 1
    height 0.7rem
    display flex
    flex-direction column
    justify-content center
    align-items center
    .van-image
      img
        width 0.55rem
        height 0.55rem
    p
      color #f66
      font-size 12px
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #f66;
}
.seckillTitle
  display flex
  height 0.9rem
  overflow auto
  li
    text-align left
    color #f66
    font-size 12px
    font-weight bold
    margin-right 12px
    &:nth-child(1)
      // width 60px
      margin-left 10px
    &:nth-child(3)
      // width 120px
      // text-align right
      margin-right 10px
      .van-icon
        transform rotate(225deg)
    &:nth-child(2)
      flex: 1
.backTop{
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 100px;
  right: 10px;
}

.splb{
    margin:0 6px;
}
.proList li{
margin-bottom:10px;
}
</style>
